<template>
  <div class="article">
    <div class="article_left">
      <user-message :username="result.username"></user-message>
      <article-ranking :rankingData="rankingData.username">
        <svg class='icon' aria-hidden='true'>
          <use xlink:href='#icon-xiangguan'></use>
        </svg>
        <span>他的文章</span>
      </article-ranking>
      <article-ranking :rankingData="rankingData.title">
        <svg class='icon' aria-hidden='true'>
          <use xlink:href='#icon-xiangguan'></use>
        </svg>
        <span>相关文章</span>
      </article-ranking>
    </div>
    <div class="article_right">
      <div class="article_nav">
        <div class="title">
          <div class="text">
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-wenzhang'></use>
            </svg>
            <h3>{{result.title}}</h3>
          </div>
          <div class="classify">
            <span>分类：{{result.classify}}</span>
            <span>收藏：{{result.collectCount}}</span>
            <span class="visit">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-youlanrenshu'></use>
              </svg>
              {{result.visit}}
            </span>
          </div>
          <ul class="tag">
            <span v-if="tag.length">文章标签：</span>
            <li v-for="(item,index) in tag" :key="index">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-biaoqian'></use>
              </svg>
              <span>{{item}}</span>
            </li>
          </ul>
        </div>
        <div class="info">
          <span class="time">{{timer(result.time)}}</span>
        </div>
      </div>
      <div class="article_content">
        <iframe :src="result.detail" 
          width="100%" 
          :height="articleHeight"
          frameborder="0"
          scrolling="no"
          @load="loadArticle"
          ref="article"
        ></iframe>
        <div class="btn">
          <p class="like" title="点赞" @click="isLike">
            <svg class='icon' aria-hidden='true'>
              <use :xlink:href='likeIco'></use>
            </svg>
            <span>{{likeText}}</span>
          </p>
          <p class="collect" title="收藏" @click="isCollect">
            <svg class='icon' aria-hidden='true'>
              <use :xlink:href='collectIco'></use>
            </svg>
            <span>{{collectText}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userMessage from "../info/userMessage.vue"
import articleRanking from "./articleRanking.vue"
import tool from "../../assets/js/tool"
import { mapActions } from 'vuex';
export default {
  name: 'Articledetail',

  data() {
    return {
      result: {}, // 当前文章信息
      rankingData: [], // 排行榜数据集（他的文章 && 相关文章）
      articleHeight: 0, // 文章高度
      likeIco: '#icon-weidianzan', // 点赞图标
      likeText: '点赞', // 点赞文字
      collectIco: '#icon-weishoucang', // 收藏图标
      collectText: '收藏' // 收藏文字
    };
  },

  computed: {
    timer(){
      return (time) => tool.GetTimer(time)
    },
    tag(){
      return this.result.tag ? this.result.tag.split(',') : []
    },
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.$api.getArticle({id:this.$route.params.id}).then(res => {
        document.title = res.result.title
        this.likeIco = res.result.like == 1 ? '#icon-yidianzan' : '#icon-weidianzan'
        this.likeText = res.result.like == 1 ? '已点赞' : '点赞'
        this.collectIco = res.result.collect == 1 ? '#icon-yishoucang' : '#icon-weishoucang'
        this.collectText = res.result.collect == 1 ? '已收藏' : '收藏'
        this.result = res.result
        this.rankingData = {
          username: res.article.filter(v => v.username == res.result.username).slice(0,10),
          title: res.article.filter(v => tool.GetCompare(v.title,res.result.title) > 30).slice(0,10)
        }
      }).catch(() => {
        this.showHint({isFlag:false,title:'文章已删除!'})
        this.$router.push('/article')
      })
    },
    // 加载文章
    loadArticle(){
      let article = this.$refs.article
      let aHeight = article.contentWindow.document.body.scrollHeight
      let bHeight = article.contentWindow.document.documentElement.scrollHeight
      this.articleHeight = Math.max(aHeight,bHeight)
    },
    // 文章点赞
    isLike(){
      this.$api.isLike({id:this.result.articleid}).then(res => {
        if(res == 1){
          this.showHint({isFlag:true,title:'点赞成功'})
          this.likeIco = '#icon-yidianzan'
          this.likeText = '已点赞'
        }else if(res == 0){
          this.showHint({isFlag:true,title:'取消点赞'})
          this.likeIco = '#icon-weidianzan'
          this.likeText = '点赞'
        }
      })
    },
    // 文章收藏
    isCollect(){
      this.$api.isCollect({id:this.result.articleid}).then(res => {
        if(res == 1){
          this.showHint({isFlag:true,title:'收藏成功'})
          this.collectIco = '#icon-yishoucang'
          this.collectText = '已收藏'
        }else if(res == 0){
          this.showHint({isFlag:true,title:'取消收藏'})
          this.collectIco = '#icon-weishoucang'
          this.collectText = '收藏'
        }
      })
    },
    ...mapActions(['showHint'])
  },

  components: {
    userMessage,articleRanking
  }
};
</script>

<style scoped>
.article{
  display: flex;
  background-color: #ececec;
  padding: 20px;
}
.article .article_right{
  background-color: white;
  margin-left: 40px;
  flex: 1;
}
.article_right .article_nav{
  display: flex;
  background-color: rgb(184, 184, 184);
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.article_right .article_nav .icon{
  font-size: 2rem;
}
.article_nav .title .text{
  display: flex;
  align-items: center;
}
.article_nav .time{
  font-size: 0.6rem;
  color: gray;
  white-space: nowrap;
}
.article_nav .tag,.article_nav .classify{
  display: flex;
  margin-top: 10px;
  font-size: 0.7rem;
  color: gray;
}
.classify .visit .icon{
  font-size: 1rem;
  vertical-align: middle;
}
.article_nav .classify span{
  margin-right: 40px;
}
.article_nav .tag li{
  font-size: 0.6rem;
  background-color: gray;
  color: rgb(204, 204, 204);
  text-align: center;
  padding: 2px;
  margin-right: 10px;
}
.article_nav .tag li .icon{
  font-size: 0.7rem;
}
.article_content .btn{
  display: flex;
  justify-content: space-around;
  padding: 80px;
}
.article_content .btn .icon{
  font-size: 3rem;
}
.article_content .btn .like,.article_content .btn .collect{
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.article_content .btn .like:hover .icon{
  animation: like .5s 1;
}
.article_content .btn span{
  font-size: 0.7rem;
}
.article_content .btn .collect:hover .icon{
  transform: rotate(145deg);
  transition: all .5s;
}
@keyframes like{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(0.8);
  }
  100%{
    transform: scale(1);
  }
}
@media screen and (max-width:800px) {
  .article{
    flex-direction: column;
    padding: 0;
  }
  .article_ranking{
    display: none;
  }
  .article .article_right{
    margin: 0;
  }
}
</style>
